<template>
  <PageWrapper>
    <el-alert
      title="扩展了Element Plus图标库,可以在@/assets/icons中新增自己的SVG图标组件,记得在@/assets/icons/index.js中引入. 建议前往阿里iconfont复制SVG代码 https://www.iconfont.cn/collections/detail?spm=a313x.7781069.0.da5a778a4&cid=25353"
      type="success"
      :closable="false"
    >
    </el-alert>

    <el-tabs v-model="activeTab" class="box">
      <el-tab-pane label="Element Plus 图标" name="first">
        <el-row>
          <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4" v-for="item in elIcons" :key="item">
            <div class="icon_card">
              <el-icon style="font-size: 30px">
                <component :is="item.name" />
              </el-icon>

              <p style="padding: 10px 0">{{ item.name }}</p>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="扩展图标" name="second">
        <el-row>
          <el-col
            :xs="24"
            :sm="12"
            :md="12"
            :lg="4"
            :xl="4"
            v-for="item in niuIconList"
            :key="item"
          >
            <div class="icon_card">
              <el-icon style="font-size: 30px">
                <component :is="`niu-icon-${item}`" />
              </el-icon>

              <p style="padding: 10px 0">{{ `niu-icon-${item}` }}</p>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </PageWrapper>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { PageWrapper } from '@/components/Page/index'
import * as elIcons from '@element-plus/icons-vue'
import * as niuIcons from '@/assets/icons'

export default defineComponent({
  components: {
    PageWrapper
  },
  setup() {
    const activeTab = ref('first')

    const niuIconList = ref<any[]>([])

    for (const Icon in niuIcons) {
      niuIconList.value.push(Icon)
    }

    return {
      activeTab,
      niuIconList,
      elIcons
    }
  }
})
</script>

<style scoped>
.box {
  margin-top: 20px;
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
}
.icon_card {
  height: 120px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
  color: #666;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>
